import React from 'react'
import { connect } from 'react-redux'

import Prompt from '../containers/Prompt'
import Input from '../components/Input'

import * as actions from '../actionTypes/'

class ProjectNamePrompt extends React.Component {
    state = {
        projectName: '',
    }
    onCancel() {
        this.props.dispatch({
            type: actions.TOGGLE_PROJECT_NAEM_MODAL,

            payload: {
                show: false,
                type: 'save',
            },
        })
    }

    onOk() {
        const { projectName } = this.state
        const { projectNameInput } = this.props.project
        if (!projectName) {
            this.props.dispatch({
                type: actions.SHOW_TOAST,
                payload: '还没有输入作品名称呦',
            })
            return
        }
        if (projectNameInput.type === 'save') {
            this.props.dispatch({
                type: actions.SAVE_PROJECT,
                saveAs: false,
            })
        } else {
            this.props.dispatch({
                type: actions.SAVE_PROJECT,
                saveAs: true,
                saveAsName: projectName,
            })
        }
    }
    onChange(e) {
        const { projectNameInput } = this.props.project
        if (projectNameInput.type === 'save') {
            this.props.dispatch({
                type: actions.CHANGE_PROJECT_NAME,
                payload: e.target.value,
            })
        }
        this.setState({
            projectName: e.target.value,
        })
    }
    render() {
        return (
            <Prompt
                isOpen={true}
                title={this.props.title}
                onOk={this.onOk.bind(this)}
                onCancel={this.onCancel.bind(this)}
            >
                <Input
                    radius={'true'}
                    value={this.state.projectName}
                    onChange={this.onChange.bind(this)}
                />
            </Prompt>
        )
    }
}

export default connect(state => state)(ProjectNamePrompt)



// WEBPACK FOOTER //
// ./src/containers/ProjectNamePrompt.js